import { PlusOutlined, UploadOutlined } from "@ant-design/icons";
import ProForm, { DrawerForm, ProFormDatePicker, ProFormDigit, ProFormGroup, ProFormSelect, ProFormText, ProFormTextArea } from "@ant-design/pro-form"
import { PageContainer } from "@ant-design/pro-layout"
import ProTable, { EditableProTable, ProColumns } from "@ant-design/pro-table"
import { Button, Upload } from "antd";
import { useState } from "react";

export default () => {
  const [activeKey,setActiveKey] = useState("tab1");
  const [showDetail,setShowDetail] = useState(false);
  const [fileList,setFileList] =useState<any>([]);
  const [editableContactKeys, setEditableContactRowKeys] = useState<React.Key[]>([1,2]);
  const [proData,setProData]  =useState<any>([{id:'1',pIndex:1},{id:'2',pIndex:2}]);
  const proColumn:ProColumns[] = [
    {
      title:'机器型号',
      dataIndex: 'name',
      editable:false,
      width:200,
      renderText:()=>'E-202102122121'
    },
    {
      title:'机器台数',
      dataIndex: 'num',
    },
    {
      title:'序列号',
      dataIndex: 'seq',
    },
  ]
  const [dataList,setDataList] =useState<any>([
    {
      name:'E-202102122121',
      code:'AO-202102122121',
      name1:'上海XXXX医院',
      name2:'消化科',
      name9:'IS3001'
    },
    {
      name:'E-202102122122',
      code:'AO-202102122122',
      name1:'中山大学附属第一医院',
      name2:'骨科',
      name9:'IS3000'
    },
    {
      name:'E-202102122126',
      code:'AO-202102122126',
      name1:'北京大学XXXX医院',
      name2:'神经科',
      name9:'IS3002'
    },
    {
      name:'E-202102122125',
      code:'AO-202102122126',
      name1:'复旦大学XXXX医院',
      name2:'骨科',
      name9:'IS3003'
    },
  ]);
  
  const columns:ProColumns[] = [
    {
      title:'装机编码',
      dataIndex: 'name',
      width:150,
    },
    {
      title:'合同编码',
      width:150,
      dataIndex: 'code',
    },
    {
      title:'医院名称',
      dataIndex: 'name1',
      width:180,
      ellipsis:true,
    },
    {
      title:'科室',
      width:100,
      dataIndex: 'name2'
    },
    {
      title:'装机型号',
      dataIndex: 'name9',
    },
    {
      title:'装机台数',
      dataIndex: 'name21',
      hideInSearch:true,
      renderText:()=>'1'
    },
    {
      title:'预计装机时间',
      dataIndex: 'name2',
      hideInSearch:true,
      renderText:()=>'2022-12-01'
    },
    {
      title:'上报人员',
      dataIndex: 'name73',
      width:100,
      renderText:()=>'王五'
    },
    {
      title:'装机人员',
      dataIndex: 'name74',
      width:100,
      renderText:()=>'李四'
    },
    {
      title:'工程师',
      dataIndex: 'name76',
      width:100,
      renderText:()=>'张三'
    },
    {
      title:'创建日期',
      dataIndex: 'name7in8',
      width:100,
      hideInSearch:true,
      renderText:()=>'2022-12-11'
    },
    {
      title: "操作",
      valueType: 'option',
      fixed:'right',
      width:150,
      render: (text, record:any,_, action) => [
        <a key="b2" onClick={()=>setShowDetail(true)}>详情</a>
      ]
    }
  ]

  return (
    <PageContainer>
           <ProTable
      headerTitle=''
      pagination={{
        pageSizeOptions:['20', '100', '500']
      }}
      toolBarRender={() => [
        <Button
          type="primary"
          key="primary"
          onClick={() => {
            setShowDetail(true)
          }} >新建</Button>]
        }
     dataSource={dataList}
      scroll={{x:1500}}
      columns={columns}
      rowKey="id"
      search={{span:6}}
      toolbar={{
        menu: {
          
        },
        settings: [],
      }}
      />
      <DrawerForm title='详情' width={1200} visible={showDetail}  onVisibleChange={v=>{setShowDetail(v)}}  drawerProps={{
          destroyOnClose:true,
          forceRender:true
        }}>
          <ProFormGroup>
              <ProFormSelect name="contract" width={'sm'} disabled label="合同编码"/>

              <ProFormText name="name3" width={'sm'} disabled label="装机客户" rules={[{ required: true}]}/>
              <Button style={{marginTop:4}} type='primary'>选择</Button>
              <ProFormText name="name" width={'md'} label="科室" rules={[{ required: true}]}/>
        </ProFormGroup>
        <ProFormGroup>
           {/* <ProFormSelect name="name9" width={'md'} label="装机型号" options={[{label:'A',value:'0'},{label:'B',value:'1'}]} /> */}
           {/* <ProFormDigit name="name" width={'md'} label="装机台数" rules={[{ required: true}]}/> */}
           {/* <ProFormSelect name="name9" width={'md'} label="序列号" mode='multiple' options={[{label:'seq0001',value:'0'},{label:'seq0002',value:'1'}]} /> */}
           <ProFormDatePicker name="n2" width={'md'} label="装机时间" rules={[{ required: true}]}/>
        </ProFormGroup>
          {/* <ProFormGroup>
              <ProFormText name="name2" width={'sm'} disabled label="客户" rules={[{ required: true}]}/>
              <Button style={{marginTop:4}} type='primary'>选择</Button>
          </ProFormGroup> */}
          <ProFormGroup>
              <ProFormText name="name1" width={'sm'} disabled label="上报人员" rules={[{ required: true}]}/>
              <Button style={{marginTop:4}} type='primary'>选择</Button>
         
              <ProFormText name="name11" width={'sm'} disabled label="装机人员" rules={[{ required: true}]}/>
              <Button style={{marginTop:4}} type='primary'>选择</Button>
        
              <ProFormText name="name111" width={'sm'} disabled label="工程师" rules={[{ required: true}]}/>
              <Button style={{marginTop:4}} type='primary'>选择</Button>
          </ProFormGroup>

          <EditableProTable  style={{marginLeft:-20}} headerTitle={'产品列表'} rowKey='pIndex' columns={proColumn} value={proData} search={false} toolbar={{
                    settings: []
                }} recordCreatorProps={false} onChange={data => {
                    setEditableContactRowKeys(data.map((item: any) => item.pIndex));
                    setProData(data);
                }} toolBarRender={() => [<Button type='primary' key='primary' onClick={() => {
                    var data = [...proData]
                    data.push({id:(proData.length+1)+'',pIndex:proData.length+1,name:'',dept:''})
                    setProData(data)
                    setEditableContactRowKeys(data.map((item: any) => item.pIndex));
                }}>
                  <PlusOutlined/>添加产品
                </Button>]} pagination={false} editable={{
                    editableKeys:editableContactKeys,
                    type: 'multiple',
                    deletePopconfirmMessage:'确定要删除吗？',
                    onChange: setEditableContactRowKeys,
                    onDelete:async(v,record)=>{

                    },
                    onValuesChange: (record, recordList) => {
                      setProData(recordList);
                    },
                    actionRender: (row, config, defaultDoms) => {
                      
                    return [defaultDoms.delete];
                    }
                }}></EditableProTable>

          <ProFormTextArea name="name11" width={'lg'} label="备注" />
      </DrawerForm>
    </PageContainer>)
}